<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="searchParams" class="demo-form-inline">
        <el-form-item label="景点名称">
          <el-input v-model="searchParams.nameLike" placeholder="请输入景点名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="推荐状态">
          <el-select v-model="searchParams.is_recommended" placeholder="请选择" clearable>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchParams.status" placeholder="请选择" clearable>
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="box-card" style="margin-top: 20px">
      <div class="table-header">
        <el-button type="primary" size="small" @click="onAdd">新增景点</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="景点名称"
          width="180">
        </el-table-column>
        <el-table-column
          label="封面图"
          width="120">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          show-overflow-tooltip
          label="详细地址">
        </el-table-column>
        <el-table-column
          prop="is_recommended"
          label="是否推荐"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_recommended === 1 ? 'success' : 'info'">
              {{ scope.row.is_recommended === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="onEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="text"
              style="color: #F82222"
              @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="changePageSize"
          @current-change="changePageNo"
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <FormAdd ref="formAdd" @get-page="initData" />
  </div>
</template>

<script>
import crudMixin from '@/mixins/crud'
import { http } from '@/api'
import FormAdd from './add.vue'

export default {
  name: 'TicketList',
  components: {
    FormAdd
  },
  mixins: [crudMixin],
  data() {
    return {
      request: http.ticketShop,
      searchParams: {
        nameLike: '',
        is_recommended: '',
        status: ''
      }
    }
  },
  methods: {
    // 打开新增弹窗
    onAdd() {
      this.$refs.formAdd.open()
    },
    // 打开编辑弹窗
    onEdit(row) {
      this.$refs.formAdd.open(row)
    }
  }
}
</script>

<style scoped>
.table-header {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
